<template>
    <div class="search">
        <div class="top">
            <i class="iconfont icon-fanhui down_B" @click="downb"></i>
            <div class="search_inp">
                <input autofocus="autofocus" type="text"  placeholder="歌曲，歌手，歌词，专辑" v-model="value" v-on:keyup.13="search_btn">
            </div>
            <i class="iconfont icon-fangdajing search_b" @click="search_btn"></i>
        </div>
        <div class="content">
            <ul >
                <li class="song_info" v-for="(item, index) in song_arr" :key="index" @click="play_song(index)">
                    <div class="song_name">{{item.songname}}</div>
                    <div class="artist_name">{{item.artistname}}</div>
                </li>
                <div class="more" @click="moreBtn">
                    <p><i class="iconfont icon-icon04"></i></p>
                    <p class="more_text">加载更多</p>
                </div>
            </ul>
            
        </div>
    </div>
</template>
<script>
import jsonp from "jsonp";

export default {
  name: "search",
  data() {
    return {
      value: "",
      valueT: "",
      song_id: "",
      song_arr: [],
    };
  },
  computed: {
    //变化属性
  },
  methods: {
    downb() {
      this.$router.go(-1);
      this.$store.commit("changeIsplayMap", false);
    },
    search_btn() {
      this.valueT = this.value;
    },
    moreBtn() {},
    play_song(index) {
      this.$store.commit("agemusicArr", this.song_arr);
      this.$store.commit("agemusicArrIndex", index);
      this.$store.commit("ageisplayicon", true);
    }
  },
  mounted() {
    
  },

  watch: {
    

    valueT() {
      jsonp(
        "http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=" +
          this.valueT,
        null,
        (err, res) => {
          if (!err) {
            this.song_arr = res.song;
            if(res.song){
              document.querySelector(".more").style.display = "block";
              document.querySelector('.more_text').innerHTML='点击加载更多！';
            }else{
              document.querySelector(".more").style.display = "block";
              document.querySelector('.more_text').innerHTML='什么都没有哦！';
            }
            
          } else {
            console.log(err);
          }
        }
      );
      
    }
  }
};
</script>
<style lang="scss" >

.search {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 99;
  background: #fff;
  .top {
    height: 45px;
    background: #22c5bd;
    color: #fff;
    position: relative;
    .down_B {
      position: absolute;
      left: 0%;
      top: 50%;
      transform: translate(10%, -50%);
      font-size: 1rem;
      z-index: 1;
    }
    .search_b {
      position: absolute;
      right: 0%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.6rem;
    }
    .search_inp {
      width: 100%;
      height: 100%;
      position: relative;
      input {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 70%;
        height: 50%;
        background: #1fb2aa;
        color: #fff;
        font-size: 0.4rem;
        border: 0;
        border-radius: 0.2rem;
        outline: none;
        font-weight: bold;
      }
      input::-webkit-input-placeholder,
      textarea::-webkit-input-placeholder {
        color: #c1f1ef;
        opacity: 0.5;
      }
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 45px);
    font-size: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    ul {
      width: 100%;
      overflow: hidden;
      padding: 10px;
      padding-bottom: 2rem;
      box-sizing: border-box;
      
      .song_info {
        padding: 10px 0;
        border-bottom: 1px solid #e9e9e9;
        .song_name {
          font-size: 15px;
          color: #22c5bd;
          line-height: 25px;
        }
        .artist_name {
          font-size: 12px;
          line-height: 17px;
          color: #848484;
        }
      }
      .more {
        width: 100%;
        background: #fff;
        padding: 0.3rem 0;
        border-top: 1px solid #f1f1f1;
        display: none;
        p {
          text-align: center;
          font-size: 0.2rem;
          color: #a4a4a4;
        }
      }
    }
  }
}
</style>
